'use client';

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import dayjs from "dayjs";
import styles from "./style.module.scss";

export default function Home() {

	const searchParams = useSearchParams();
	/** 轮播时间 */
	const timer = searchParams.get("timer");
	/** 是否自动轮播 */
	const autoCarousel = !!timer
	/** 地球 */
	const omsDashboardUrl = searchParams.get("omsDashboardUrl");
	/** 仓库
	 * TODO:做成可以配置 */
	const wmsDashboardUrl = searchParams.get("wmsDashboardUrl");
	/** 城西仓 */
	const cxDashboardUrl = searchParams.get("cxDashboardUrl");
	/** 派速捷 */
	const psjDashboardUrl = searchParams.get("psjDashboardUrl");

	const srcList: string[] = [];
	if (cxDashboardUrl) {
		srcList.push(cxDashboardUrl);
	}
	if (wmsDashboardUrl) {
		srcList.push(wmsDashboardUrl);
	}
	if (omsDashboardUrl) { 
		srcList.push(omsDashboardUrl);
	}
	if (psjDashboardUrl) { 
		srcList.push(psjDashboardUrl);
	}
	
	
	const [current, setCurrent] = useState(0);
	const [direction, setDirection] = useState("down");

	/** 手动控制 */
	const handleKeyDown = (e: KeyboardEvent) => {
			if (e.key === 'ArrowUp') {
				setDirection("up");
				setCurrent((current) => (current === 0 ? srcList.length - 1 : current - 1));
			} else if (e.key === "ArrowDown") {
				setDirection("down");
        		setCurrent((current) =>
          			srcList.length - 1 === current ? 0 : current + 1
				);
			}
	}

	let delayer: any = null;
	/** 自动轮播 */
	const handleAutoCarousel = () => { 
		if (delayer) {
			clearTimeout(delayer);
			delayer = null;
		}
		delayer = setTimeout(() => {
			setDirection("down");
			setCurrent((current) =>
				srcList.length - 1 === current ? 0 : current + 1
			);
			handleAutoCarousel();
		}, timer ? Number(timer) : 30000);
	}

	let reTimer: any = null;
	/** 定时刷新页面 */
	const reloadPage = () => {
		if (reTimer) {
			clearTimeout(reTimer);
			reTimer = 0;
		}

		if (typeof window === "undefined") {
			return;
		}

		reTimer = setTimeout(() => {
			const date = dayjs().format("HH:mm:ss");
			if (date === "08:30:00" || date === "12:30:00") {
				window.location.reload();
			}
			reloadPage();
		}, 1000);
	};

	
	useEffect(() => {
		if (autoCarousel) {
			handleAutoCarousel();
		}
		reloadPage();
		window.addEventListener("keydown", handleKeyDown);
		return () => { 
			window.removeEventListener("keydown", handleKeyDown);
			clearTimeout(delayer);
			clearTimeout(reTimer);
		}
	}, []);
	
	useEffect(() => {
		if(!cxDashboardUrl) return;
		const index = srcList.findIndex((i) => i.includes("/web/cx"));
		let iframe = document.getElementById("iframe" + index) as HTMLIFrameElement;
		iframe?.contentWindow?.postMessage( current === index ? "show" : "hide", cxDashboardUrl || "" );
  }, [current, cxDashboardUrl]);

	return (
    <div style={{ backgroundColor: "#000", width: "100vw", height: "100vh" }}>
      {srcList.map((i: string, index: number) => (
        <div
          style={{
            overflow: "hidden",
            width: "100vw",
            height: "100vh",
            position: "absolute",
            top: 0,
            left: 0,
            display: index === current ? "block" : "none",
          }}
          className={
            index === current
              ? styles[
                  direction === "up" ? "bounce-enter-active" : "up-enter-active"
                ]
              : styles[
                  direction === "up" ? "bounce-leave-active" : "up-leave-active"
                ]
          }
          key={i}
        >
            <iframe
			  src={i}
			  id={'iframe' + index}
              style={{ width: "100%", height: "100%", pointerEvents: 'none' }}
              frameBorder="0"
            />
          
        </div>
      ))}
    </div>
  );
}

